<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">


        <a-col :span="12">
          <a-form-item label="猪圈代码" field="code">
            <a-input v-model="formState.code" placeholder="请填写场地代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="猪圈名称" field="name">
            <a-input v-model="formState.name" placeholder="请填写猪圈名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="猪圈类型" field="kind">
            <smart-dict v-model="formState.kind" :url="DictOptions.PigstyKind" placeholder="请选着猪圈类型"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="场地地址" field="place.code">
            <smart-dict v-model="formState.place.code" :url="ProductOptions.BasicPlaceOptions"
                        placeholder="请选着场地地址"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="猪圈属性" field="isOrganic">
            <smart-bool v-model="formState.isOrganic" true-text="有机猪圈" false-text="非有机猪圈"
                        :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort"
                       tooltip="升序排序 显示值越小 显示越靠前">
            <a-slider v-model="formState.sort"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="猪圈容量" field="number">
            <a-input-number v-model="formState.number" placeholder="请填写猪圈容量"/>
          </a-form-item>
        </a-col>
        <a-col v-if="!isUpdate" :span="24">
          <a-form-item>
            <a-transfer v-model="formState.cameraCode" :title="trData.title" show-search :data="trData.data" one-way/>
          </a-form-item>
        </a-col>

      </a-row>


    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {reactive} from "vue";
import {EditDrawer} from '@/libs/core'
import {DictOptions, ProductOptions} from '@/libs/options'
import {PIGSTY_EDIT} from "../../resource/form";
import {ProductHttp} from '../../resource/http'

import {RequestUtil} from "@/utils";


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = PIGSTY_EDIT

const {addPigsty, updatePigsty} = ProductHttp
const trData = reactive({
  data: [],
  title: ['待选摄像头', '已选摄像头']
})


const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addPigsty).setUpdateRequest(updatePigsty)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改猪圈' : '新增猪圈'


const loadData = async () => {
  const {data} = await RequestUtil.getAjax(ProductOptions.BasicCameraDetailOptions)
  trData.data = data
}
loadData()

</script>
<style lang="less" scoped>
:deep(.arco-transfer) {
  padding-bottom: 12px;
}

:deep(.arco-transfer-view) {
  width: 330px;
  height: 400px;
}
</style>